<template>
  <div id="main">
    <el-card class="add-box-card" :body-style="{height:'calc(100% - 76px)',overflow:'auto',display:'flex'}">
      <div slot="header" class="box-card-title">
        <span>添加设备</span>
      </div>

      <el-form class="edit-form" label-width="100px"  :rules="rules" ref="ruleForm" :model="editFormData">
        <el-form-item label="设备编号：" prop="order">
          <el-input class="list-input" v-model="editFormData.order"  placeholder='请输入资产编号'></el-input>
        </el-form-item>
        <el-form-item label="设备名称：" prop="name">
          <el-input class="list-input" v-model="editFormData.name"  placeholder='请输入资产名称'></el-input>
        </el-form-item>
        <el-form-item label="设备图片：">
          <el-upload
            ref="my-upload"
            action="http://hqgj.heweixiao.cn/base64_upload"
            list-type="picture-card"
            :on-success="handelupdata"
            :on-change="onChange"
            :on-remove="handleRemove"
            :limit="1">
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="">
          </el-dialog>
          <span>最多上传1张图片</span>
        </el-form-item>
        <el-form-item label="采购时间：">
          <el-date-picker
            v-model="editFormData.eq_purchase_time"
            type="date"
            value-format="yyyy-MM-dd"
          placeholder="选择日期"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="设备位置：">
          <el-select @change="gaibian" v-model="editFormData.louvalue" placeholder="请选择楼" style="width:130px"> 
             <el-option
               v-for="item in options"
               :key="item.id"
               :label="item.f_name"
               :value="item.id"
               :disabled="item.disabled">
             </el-option>
          </el-select>
          <el-select v-model="editFormData.cengvalue" placeholder="请选择层" style="width:130px">
             <el-option
               v-for="item in options1"
               :key="item.id"
               :label="item.f_name"
               :value="item.id"
               :disabled="item.disabled">
             </el-option>
          </el-select>
          <el-input
            placeholder="请输入房间号"
            v-model="editFormData.rongvalue"
            style="width:190px;"
            clearable
            >
          </el-input>
          <span>室</span>
          
        </el-form-item>
        <el-form-item label="质保时间：">
          <el-date-picker
            v-model="editFormData.timeRange"
            type="date"
            value-format="yyyy-MM-dd"
          placeholder="选择日期"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="目前状态：">
          <el-select class="list-input" v-model="editFormData.status">
            <el-option
              v-for="item in statusOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="维修厂家：" prop="chang">
          <el-input class="list-input" v-model="editFormData.chang" placeholder='请输入维修厂家'></el-input>
        </el-form-item>
        <el-form-item label="厂家电话：" prop="tel">
          <el-input class="list-input" v-model="editFormData.tel" placeholder='请输入厂家电话'></el-input>
        </el-form-item>
      </el-form>

      <!--<el-form class="edit-form" label-width="100px">
        <el-form-item label="资产编号：">
          <el-input class="list-input" v-model="editFormData2.order" placeholder></el-input>
        </el-form-item>
        <el-form-item label="资产名称：">
          <el-input class="list-input" v-model="editFormData2.name" placeholder></el-input>
        </el-form-item>
        <el-form-item label="资产位置：">
          <el-input class="list-input" v-model="editFormData2.location" placeholder></el-input>
        </el-form-item>
        <el-form-item label="维修时间：">
          <el-date-picker
            v-model="editFormData2.timeRange"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="目前状态：">
          <el-select class="list-input" v-model="editFormData2.status">
            <el-option
              v-for="item in statusOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>-->
    </el-card>

    <div class="footer">
      <el-button @click="submit('ruleForm')" class="greenButton" type="primary">提交</el-button>
      <!--<el-button  class="greenButton" type="primary">批量导入</el-button>-->
    </div>
  </div>
</template>

<script>
let fileImg = null;
export default {
  data: function() {
    return {
      ruleForm:{
        order:''
      },
      rules:{
       order:[{ required: true, message: '请输入资产编号', trigger: 'blur' },],
       name:[{ required: true, message: '请输入资产名称', trigger: 'blur' },],
       chang:[{ required: true, message: '请输入维修厂家', trigger: 'blur' },],
       tel:[{ required: true, message: '请输入厂家电话', trigger: 'blur' },],
      },
      //===============================
      dialogImageUrl: '',
      dialogVisible: false,
      options: [{
          value: '选项1',
          label: '黄金糕'
        }, {
          value: '选项2',
          label: '双皮奶',
          disabled: true
        }],
        options1: [{
          value: '选项1',
          label: '黄金糕'
        }, {
          value: '选项2',
          label: '双皮奶',
          disabled: true
        }],
      editFormData: {
        order: "",
        name: "",
        louvalue:"",
        cengvalue:"",
        rongvalue:"",
        timeRange: "",
        status: "",
        chang:"",
        imglist:"",
        tel:"",
        eq_purchase_time:''
      },

      editFormData2: {
        order: "",
        name: "",
        louvalue:"",
        cengvalue:"",
        rongvalue:"",
        timeRange: "",
        status: "",
        chang:"",
        imglist:"",
        tel:""
      },

      statusOptions: [
        {
          value: "1",
          label: "正常使用"
        },
        {
          value: "-1",
          label: "已报废"
        }
      ],
    };
  },
  mounted(){
    this.huoqu();

  },

  methods:{
    clearFiles () {
        this.$refs['my-upload'].clearFiles();
    },
    handleRemove(file, fileList) {
        this.editFormData.imglist = "";
      },
      onChange(file, fileList){
        console.log('--------------', file, fileList)
      },
    handelupdata(response, file, fileList){
        console.log(response, file, fileList)
        this.editFormData.imglist = response;
      
    },
    
    gaibian(){
      console.log(this.editFormData.louvalue)
      this.options.forEach(item => {
        if(this.editFormData.louvalue == item.id){
          this.options1 = item.floor;
        }
      })
        
    },
    huoqu(){
      this.ajaxCommon.ajax({
          url: 'louceng',
          success: (res)=>{
             console.log(res);
             if(res.code == 200){
               this.options = res.data;
             }
          }
        });

    },
    resetForm(formName) {
        this.$refs[formName].resetFields();
        this.clearFiles()
        console.log(this.editFormData)
    },
    submit(formName){
      this.$refs[formName].validate((valid) => {
          if (valid) {
            let temp = this.editFormData;
            var uuid=localStorage.getItem('uid');
            let data = {
              eq_model: temp.order,
              eq_name: temp.name,
              //eq_img: formData.age,
              eq_building_id:temp.louvalue,
              eq_floor_id:temp.cengvalue,
              eq_room:temp.rongvalue + '室',
              eq_main_time: temp.timeRange,
              eq_purchase_time:temp.eq_purchase_time,
              eq_state: temp.status,
              uid: uuid,
              eq_img:temp.imglist,
              eq_manufactor:temp.chang,
              eq_repair_tell:temp.tel
            };
            let formData = new FormData();
            Object.keys(data).forEach(key=>{
              formData.append(key, data[key]);
            });
            console.log(data)
            console.log('提交数据',formData)
            this.$confirm('确认添加新设备？', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'info'
            }).then(() => {
              this.ajaxCommon.ajax({
                url: 'equipmentAdd',
                headers:{'Content-Type': 'multipart/form-data'},
                method: 'post',
                data: formData,
                success: (res)=>{
                  if(res.code==200){
                    this.editFormData = {
                      order: "",
                      name: "",
                      louvalue:"",
                      cengvalue:"",
                      rongvalue:"",
                      timeRange: "",
                      status: "",
                      chang:"",
                      imglist:"",
                      tel:""
                    }
                    this.ajaxCommon.notice('添加成功');
                    this.resetForm('ruleForm')
                  } else {
                    this.ajaxCommon.notice(res.status,3);
                  }
                }
              });
            })
            // alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
      });
      // ---------------------------------
      // let temp = this.editFormData;
      // var uuid=localStorage.getItem('uid');
      // let data = {
      //   eq_model: temp.order,
      //   eq_name: temp.name,
      //   //eq_img: formData.age,
      //   eq_building_id:temp.louvalue,
      //   eq_floor_id:temp.cengvalue,

      
      //   eq_room:temp.rongvalue + '室',
      //   eq_main_time: temp.timeRange,
      //   eq_state: temp.status,
      //   uid: uuid,
      //   eq_img:temp.imglist,
      //   eq_manufactor:temp.chang,
      //   eq_repair_tell:temp.tel
      // };
      // let formData = new FormData();
      // Object.keys(data).forEach(key=>{
      //   formData.append(key, data[key]);
      // });
      // console.log(data)
      // console.log(formData)
     


      // this.$confirm('确认添加新设备？', '提示', {
      //   confirmButtonText: '确定',
      //   cancelButtonText: '取消',
      //   type: 'info'
      // }).then(() => {
      //   this.ajaxCommon.ajax({
      //     url: 'equipmentAdd',
      //     headers:{'Content-Type': 'multipart/form-data'},
      //     method: 'post',
      //     data: formData,
      //     success: (res)=>{
      //       if(res.code==200){
      //         this.editFormData = {
      //           order: "",
      //           name: "",
      //           location: "",
      //           timeRange: "",
      //           status: ""
      //         }
      //         this.ajaxCommon.notice('添加成功');
      //       } else {
      //         this.ajaxCommon.notice(res.status,3);
      //       }
      //     }
      //   });
      // })
    }
  }
};
</script>

<style lang="less" scoped>
#main {
  width: 100%;
  .add-box-card {
    border: 1px solid #00bdac;
    box-shadow: 0px 4px 16px 0px rgba(0, 201, 212, 0.14);
    height: 480px;
    .box-card-title {
      background-color: #00bdac;
      height: 36px;
      line-height: 36px;
      padding-left: 30px;
      font-size: 14px;
      color: #ffffff;
    }
  }

  .footer {
    width: 100%;
    text-align: right;
    margin-top: 20px;
  }
}

.list-input{
  width: 400px;
}
</style>

<style lang="less">
.add-box-card {
  .el-card__header {
    padding: 0;
  }
}
</style>
